<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户权限分配</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/google-fonts/google.fonts.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/common.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.min.css' %}">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- 换行占位 -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <p> </p>
            </div>
        </div>
    </section>
    <!-- 搜索栏 -->
    <section class="content">
        <div class="container-fluid">
            <form action="">
                <div class="row">
                    <div class="col-4">
                        <div class="form-group">
                            <select class="form-control" style="width: 100%;">
                                <option selected>已启用</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                      <div class="input-group">
                          <input type="search" class="form-control" placeholder="请输入用户名称">
                      </div>
                    </div>
                    <div class="col-2">
                      <div class="input-group">
                         <button type="button" class="btn btn-block btn-primary">搜索</button>
                      </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <table id="table_user_group" class="table table-bordered table-hover">
                  <thead>
                      <tr>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>归属用户组</th>
                        <th>操作</th>
                      </tr>
                  </thead>
                  <tbody>
                    {% for per in users %}
                    <tr>
                        <td class="col-2">{{ per.username }}</td>
                        <td class="col-2">{{ per.true_name }}</td>
                        <td class="col-6">
                            {% for key,value in user_groups_names.items %}
                                {% if key == per.id  %}
                                    <span> {{ value }} </span>
                                {% endif %}
                            {% endfor %}
                        </td>
                        <td class="col-2">
                            <div class="btn-group">
                                  <button type="button" class="btn btn-block btn-outline-success"  onclick="addGroupToUser(this)">新增组</button>
                                  <p> </p>
                                  <button type="button" class="btn btn-block btn-outline-warning"  onclick="deleteGroupToUser(this)">删除组</button>
                            </div>
                            <!--页面隐藏存储每一条数据中对应的用户ID，后期会使用该ID操作用户数据的状态-->
                            <input type="hidden" id="id_hidden" value={{ per.id }}>
                            <input type="hidden" id="name_hidden" value={{ per.username }}>
                        </td>
                    </tr>
                   {% endfor %}
                  </tbody>
                </table>
              <!-- /.card-body -->
              </div>
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!--模态窗口，新增的用户的用户组权限-->
<div class="modal fade" id="addGroupToUserModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post">
                {% csrf_token  %}
                <div class="modal-header">
                    <h4 class="modal-title" style="float:left">分配用户组权限</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <span>用户名：</span>
                    <span id="user_name" ></span>
                    <!--隐藏传递配置的用户id-->
                    <input type="hidden" id="user_id_hidden">
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-3"><span>新增用户组：</span></div>
                        <div class="col-8">
                            <select class="form-control" id="group_selected" style="width: 100%;">
                            <option value=0 selected>请选择</option>
                            {% for per in groups %}
                            <option value={{ per.id }}>{{ per.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-1"><span> </span></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="addGroupToUserButton" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </form>
        </div>
    </div>
</div>
<!--模态窗口，删除的用户的用户组权限-->
<div class="modal fade" id="deleteGroupToUserModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post">
                {% csrf_token  %}
                <div class="modal-header">
                    <h4 class="modal-title" style="float:left">删除用户组权限</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <span>用户名：</span>
                    <span id="user_name_delete" ></span>
                    <!--隐藏传递配置的用户id-->
                    <input type="hidden" id="user_id_hidden_delete">
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-3"><span>删除用户组：</span></div>
                        <div class="col-8">
                            <select class="form-control" id="group_selected_delete" style="width: 100%;">
                            <option value=0 selected>请选择</option>
                            {% for per in groups %}
                            <option value={{ per.id }}>{{ per.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-1"><span> </span></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="deleteGroupToUserButton" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- DataTables  & Plugins -->
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Page specific script -->
<script>
  $(function () {
    $('#table_user_group').DataTable({
      "paging": true,         <!-- 开启表格分页 -->
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
<!--处理主页按键功能，配置权限组-->
<script type="text/javascript">
  //给用户增加用户组权限
  function addGroupToUser(obj){
      var $tds = $(obj).parent().parent().children();     // 获取到父控件div下面的所有子项
      var user_id = $($tds[1]).val();
      var user_name = $($tds[2]).val();
      $("#user_id_hidden").val(user_id);
      $("#user_name").text(user_name);
      $("#addGroupToUserModal").modal({
        backdrop: 'static',
        keyboard: false
      });
  }
  //给用户删除用户组权限
  function deleteGroupToUser(obj){
      var $tds = $(obj).parent().parent().children();     // 获取到父控件div下面的所有子项
      var user_id = $($tds[1]).val();
      var user_name = $($tds[2]).val();
      $("#user_id_hidden_delete").val(user_id);
      $("#user_name_delete").text(user_name);
      $("#deleteGroupToUserModal").modal({
        backdrop: 'static',
        keyboard: false
      });
  }
</script>
<!--处理模态窗口确认按钮，配置权限组-->
<script>
    //新增分配用户组确认按钮（模态窗口中）
    $(function () {
        // 模态框的确定按钮的点击事件
        $("#addGroupToUserButton").click(function () {
            // ajax异步删除
            $.ajax({
                url: "/basic/ajax_add_group_to_user/",
                type: "POST",
                data: {//请求参数
                    userId: $("#user_id_hidden").val(),
                    groupId:$("#group_selected option:selected").val(),         //用jquery获取select控件的值
                    "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    if(data.code == 1000){
                        alert("保存用户权限成功")
                        window.


                            .reload()     //执行完成后，刷新当前页面
                        // $("table_user_group").bootstrapTable('refresh')
                    }
                },
                //请求失败后操作
                error: function (jqXHR, textStatus, err) {
                    console.log(arguments);
                },
            })
        });
    });
    //删除分配用户组确认按钮（模态窗口中）
    $(function () {
        // 模态框的确定按钮的点击事件
        $("#deleteGroupToUserButton").click(function () {
            // ajax异步删除
            $.ajax({
                url: "/basic/ajax_delete_group_to_user/",
                type: "POST",
                data: {//请求参数
                    userId: $("#user_id_hidden_delete").val(),
                    groupId:$("#group_selected_delete option:selected").val(),         //用jquery获取select控件的值
                    "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    if(data.code == 1000){
                        alert("删除用户权限成功")
                        window.location.reload()     //执行完成后，刷新当前页面
                        // $("table_user_group").bootstrapTable('refresh')
                    }else if(data.code == 1001){
                        alert("用户没有你选择删除的组")
                    }
                },
                //请求失败后操作
                error: function (jqXHR, textStatus, err) {
                    console.log(arguments);
                },
            })
        });
    });


</script>
</body>
</html>
